<template>
	<view class="main">
		<u--form labelPosition="left" :model="formData" ref="form1">
			<view class="module">
				<view class="module-flie">
					<view class="module-flie-title">头像</view>

					<view class="module-flie-card">
						<uploadFile :fileList1="fileList1" :limit="2" :tipText="'点击上传头像'" @getImg="getImg" />
					</view>
				</view>
				<u-form-item label="姓名" prop="nickName" labelWidth="120" borderBottom ref="item1">
					<u--input v-model="formData.nickName" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="性别" prop="sex" labelWidth="120" borderBottom ref="item1">
					<view class="update-group">
						<view class="group-item" v-for="item in list" @click="select(item)">
							<span class="check" :class="[item.status == formData.sex?'check-active':'']">
								<span class="check-inner" v-if="item.status == formData.sex"></span>
							</span>
							<span>{{item.name}}</span>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="身份证号码" prop="card" labelWidth="120" borderBottom ref="item1">
					<u--input v-model="formData.card" border="none" placeholder="请输入"></u--input>
				</u-form-item>		
				<u-form-item labelPosition="top" class="topClass" label="我的身份"  borderBottom ref="item1">
					<view class="auth-box">
						<view v-for="item in roleList" hover-class="tab_top_box_hover" class="auth-box-item"
							:class="[item.isChecked?'item-checked':'']" @click="selectRole(item)">
							<span>{{item.roleName}}</span>
							<view class="viewRadius" v-if="item.isCheckwozhed">
								<view>
									<u-icon class="checked" name="checkbox-mark" color="#fff" size="13"></u-icon>
								</view>
							</view>
						</view>
					</view>
					
				</u-form-item>

				<!--供应商信息-start-->
				<template v-if="formData.roleIds.length&&hasSupplier(100)">
					<u-form-item label="供应商名称" prop="userName" labelWidth="120" borderBottom ref="item1">
						<u--input v-model="formData.userName" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item label="联系方式" prop="tel" labelWidth="120" borderBottom ref="item1">
						<u--input v-model="formData.tel" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item label="地址" @click="selectAddress(); hideKeyboard()" prop="projDpkName" labelWidth="120"
						borderBottom ref="item1">
						<u--input disabledColor="#ffffff" v-model="formData.projDpkName" disabled border="none"
							placeholder="请选择"></u--input>
						<image class="dingwei-img" slot="right" src="@/static/mine/icon-dingwei.png"></image>
					</u-form-item>
					<u-form-item label="主要经营业务" prop="business" labelWidth="120" :borderBottom="false" ref="item1">
						<u--textarea maxlength="-1" autoHeight v-model="formData.business" border="none"
							placeholder="请输入"></u--textarea>
					</u-form-item>
				</template>
				<!--供应商信息-end-->

				<!--业务、生产、管理人员信息-start-->
				<template v-if="formData.roleIds.length&&!hasSupplier(100)">
					<u-form-item label="年龄" prop="age" labelWidth="120" borderBottom ref="item1">
						<u--input v-model="formData.age" border="none" placeholder="请选择"></u--input>
					</u-form-item>
					<u-form-item label="详细地址" prop="address" labelWidth="120" borderBottom ref="item1">
						<u--input v-model="formData.address" border="none" placeholder="请输入"></u--input>
					</u-form-item>

					<u-form-item label="联系电话" prop="tel" labelWidth="120" borderBottom ref="item1">
						<u--input v-model="formData.tel" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item label="应急电话" prop="emergencyCall" labelWidth="120" borderBottom ref="item1">
						<u--input v-model="formData.emergencyCall" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item label="开户银行" prop="bankName" labelWidth="120" borderBottom ref="item1">
						<u--input v-model="formData.bankName" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item label="银行卡号" prop="bankCard" labelWidth="120" :borderBottom="false" ref="item1">
						<u--input v-model="formData.bankCard" border="none" placeholder="请输入"></u--input>
					</u-form-item>
				</template>
				<!--业务、生产、管理人员信息-end-->

			</view>
		</u--form>

		<!--底部按钮-satrt-->
		<view class="btn">
			<view class="btn-item" @click="submit">提交</view>
		</view>
		<!--底部按钮-end-->


		<u-action-sheet :show="isShowPop" :actions="actions" title="请选择" @close="isShowPop = false"
			@select="popSelect"></u-action-sheet>
	</view>
</template>

<script>
	import db from '@/common/localstorage.js'

	export default {

	async	onLoad(options) {
		await	this.getUserType()
			this.getInfo()
		},

		data() {
			return {
				roleList: [],
				status: 1,
				list: [{
					name: '男',
					status: 0
				}, {
					name: '女',
					status: 1
				}],
				isShowPop: false,
				actions: [],
				popType: '',
				userList: [],
				userInfo: {},
				fileList1: [],

				formData: {
					sex: 1,
					nickName: '',
					roleIds:[],
					card:'',
				},
				rules: {
					nickName: {
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['change']
					},
				},

			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			hasSupplier(permissions) {
			  return this.formData.roleIds.some(item => {
			    return item == permissions
			  })
			},
			selectRole(item) {
				
				
				if (!item.isChecked) {
					this.$set(item, 'isChecked', true)
					this.formData.roleIds.push(item.roleId)
				} else {
					this.$set(item, 'isChecked', false)
					this.removeByValue(this.formData.roleIds, item.roleId)
				}
				this.formData.userType = 'CC'
				if(this.hasSupplier(100)){
					this.formData.userType = 'DD'
					this.roleList.forEach(v=>{
						if(v.roleId != 100){
							v.isChecked = false
						}
					})
				}
			},
			/**根据属性删除指定对象**/
			removeByValue(arr, value) {
				var index = 0;
				for (var i in arr) {
					if (arr[i] == value) {
						index = i;
						break;
					}
				}
				arr.splice(index, 1);
			},
			select(item) {
				this.status = item.status
				this.formData.sex = item.status
			},
			getImg(val) {
				console.log(val)
				this.formData.avatar = val[0].url
				// this.fileList1.push(val)
				console.log(val)
			},
			showPop(type, list) {
				this.actions = list
				this.popType = type
				this.isShowPop = true
			},
			popSelect(e) {
				this.isRe = false
				this.formData[this.popType] = e.name

				console.log(this.formData)
				this.$refs.form1.validateField(this.popType)
				this.isRe = true
			},
			async getUserType() {
				await this.$postjson('/api/user/getRole', {}).then(res => {
					this.roleList = res.data.data
				})
			},
			selectAddress() {
				let that = this
				wx.chooseLocation({
					success: function(res) {
						// res.name  位置名称
						//res.address  详细地址
						//res.latitude 纬度
						//res.longitude 经度
						console.log("res", res)
						that.formData.lat = res.latitude 
						that.formData.lon = res.longitude 
						that.formData.address = res.address

					}
				})
			},

			submit() {

				console.log(this.formData)
				let that = this

				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					uni.showLoading({
						title: '提交中'
					});
				
					that.$postjson('/api/user/authentication', that.formData).then(res => {
						uni.hideLoading()
						if (res.data.code == 200) {
							setTimeout(v => {
								uni.navigateBack()
							}, 1000)
							uni.$u.toast('操作成功')
						} else {
							uni.$u.toast(res.data.msg)
						}
					})
				}).catch(errors => {
					console.log(errors)
					uni.$u.toast('请完善表单')
				})
			},
			getInfo(){
				let that = this
				this.$postjson('/api/user/getInfo',{}).then(res=>{
					let data = res.data.data
					let roles = data.roleIds?data.roleIds:[]
					this.formData = data?data:this.formData
					this.formData.roleIds = roles
					
					for (let i = 0; i < this.formData.roleIds.length; i++) {
						for (let j = 0; j < this.roleList.length; j++) {
							if (this.roleList[j].roleId == this.formData.roleIds[i]) {
								this.roleList[j].isChecked = true
							}
						}
					}
					
					if(data.avatar){
						this.fileList1.push({url:data.avatar})
					}
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}



		},
	}
</script>

<style lang="scss" scoped>
	.auth-box {
		display: flex;
		flex-wrap: wrap;
		padding: 0upx 0 40upx 0upx;
		background: #fff;
	
		.auth-box-item {
			min-width: 115upx;
			padding: 0 20upx;
			margin-left: 30upx;
			background: rgba(0, 170, 255, 0.00);
			border: 1upx solid #aaaaaa;
			border-radius: 6px;
			color: #aaaaaa;
			font-size: 28upx;
			line-height: 80upx;
			height: 80upx;
			text-align: center;
			margin-top: 30upx;
			position: relative;
		}
	
		.item-checked {
			color: #23c993;
			border: 1upx solid #23c993;
		}
	
		.viewRadius {
			position: absolute;
			top: 0;
			right: 0;
			border: 25rpx solid #23c993;
			border-right: 28rpx solid #23c993;
			border-left: 52rpx solid transparent;
			border-bottom: 14rpx solid transparent;
			border-top-right-radius: 12rpx;
			content: "";
			width: 0;
	
			.checked {
				color: #ffff;
				font-weight: 700;
				position: absolute;
				top: 0;
				top: -12px;
				right: -13px;
			}
		}
	}
	
	.topClass{
		::v-deep .u-form-item__body{
			flex-direction: column !important;
			.u-form-item__body__left{
				width: 370px !important;
				margin-bottom: 20upx !important;
			}
		}
	}
	page {
		background: #f9f9f9;
	}

	.update-group {
		width: 288upx;
		height: 44upx;
		display: flex;
		justify-content: flex-start;

		.group-item {
			display: flex;
			align-items: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			margin-right: 100upx;
		}

		.check {
			width: 34rpx;
			height: 34rpx;
			background: #FFFFFF;
			border: 2rpx solid #999999;
			position: relative;
			margin-right: 10upx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.check-active {
			border: 2rpx solid #11AA66;
		}

		.check-inner {
			width: 18rpx;
			height: 18rpx;
			background: #11AA66;
			border-radius: 50%;
			display: inline-block;
		}
	}


	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 118rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(0, 0, 0, 0.06);
		padding-bottom: 68rpx;
		padding-left: 30upx;
		padding-right: 30upx;
		padding-top: 30upx;
		width: calc(100% - 60upx);

		.btn-item {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			width: 552rpx;
			height: 88rpx;
			background: linear-gradient(138deg, #12C66B 0%, #11AA66 100%);
			border-radius: 44rpx;
			margin: auto;
			line-height: 88upx;
		}
	}

	.dingwei-img {
		width: 36upx;
		height: 36upx;
	}

	.main {
		// margin-top: 24upx;
		// padding: 0 32upx;
		// background: #fff;
		padding-bottom: 250upx;

		.module {
			background: #fff;
			padding: 20upx 30upx;

			.module-flie {
				.module-flie-title {
					font-family: PingFangSC, PingFang SC;
					// font-weight: 500;
					font-size: 32rpx;
					color: #111111;
					position: relative;
					width: 100%;
					margin-bottom: 30upx;
				}

				.module-flie-title::after {
					// content: '';
					width: 8rpx;
					height: 28rpx;
					background: linear-gradient(180deg, #11AA66 0%, #12C66B 100%);
					position: absolute;
					left: -20upx;
					bottom: 8upx;

				}

				.module-flie-card {
					text-align: center;

				}

			}

			::v-deep .u-form-item__body {
				padding: 32upx 0 !important;
			}

			::v-deep .u-form-item__body__left__content__required {
				// left: auto !important;
				// right: 3px !important;
				font-size: 32upx;
				margin-top: -2px;
			}

			::v-deep .u-form-item__body__right {
				padding-left: 20upx;
			}

			::v-deep .u-form-item__body__left__content__label {
				font-size: 32upx;
			}


			::v-deep .u-border {
				border: none;
			}

			::v-deep .u-textarea__field {
				min-height: 24px;
			}

			::v-deep .uni-textarea-textarea {
				font-size: 32upx;
			}


			::v-deep .u-textarea {
				padding: 0;
			}

			::v-deep .uni-textarea-placeholder {
				color: rgb(192, 196, 204) !important;
				font-weight: 400;
				font-size: 28upx;
			}

			.topClass {
				::v-deep .u-form-item__body {
					flex-direction: column !important;

					.u-form-item__body__right {
						padding-left: 0px;
					}
				}
			}

		}


	}


	.selectText {
		font-size: 32upx;
	}
</style>